菜菜菜的前端學習日誌 - Day10

animation 動畫

animation 就是動畫，其實它跟transition有一點像。
但又有不一樣，那又有哪裡不一樣呢？就讓我們來看看吧

animation 屬性

animation 有下列的屬性：

1. animation-name：動畫的名稱，跟 transition 不一樣的是 transition 是設定要有轉場效果的元素名稱，而 animation-name 要搭配一組對應的@keyframes，寫法如下：

div{
    animation-name: andy;
}
@keyframes andy{
    0%{ width: 100px;}
    100%{ width: 200px;}
}

動畫的名稱是 andy ，這個動畫執行時會先從0%開時執行然後會在100%結束，就會產生動畫的效果(先講解 animation-name 才這樣寫，實際上要加上執行時間才會執行動畫唷)。

可能會有人說：奇怪這樣跟 transition 效果不是一樣嗎？

以上面那段來說是一樣沒錯，但是 animation 能夠設置多個節點且能設定多組屬性，也就是說 animation能夠變大又變色又移動...等多重效果。

2. animation-duration：動畫的執行時間，必須要加上這個屬性動畫才會執行的，就跟 transition 是一樣的。
3. animation-timing-function：跟 transition一樣的，是設定動畫的加速度效果，如果不清楚的可以跳回去看一下唷
   Transition轉場效果
4. animation-delay：跟 transition 一樣能夠設定動畫的延遲時間，另外提一點，延遲時間不只能夠設定正數，也能夠設定負數的喲，
5. animation-iteration-count：動畫的播放次數，而能夠設定的參數如下：

6. animation-direction：播放的方向，總共有4種參數如下：

7. animation-play-state：播放的狀態，預設為 running(正在跑？！) ，顧名思義就是就是播放拉～
   另外一個參數是paused，就是讓暫停動畫，下面再來討論何時能夠使用它
8. animation-fill-mode：填充模式，可設定動畫為播放的樣式，參數有forwards、backwards、both，這比較難用文字去描述，下面用一些例子這比較難用文字去描述，下面用實作來解說：

實作

首先來實做一個正常沒有加上animation-delay及animation-fill-mode的動畫

設定它的動畫名稱為andy、執行時間為2s、等速，初始顏色為紅色，動畫開始時會從綠色變成藍色

動畫效果會如下

因為沒有延遲時間所以會直接播放動畫綠色變成藍色，動畫播放完畢後再回到原始狀態的紅色

而如果再加上延遲時間2s

效果會是這樣

它會先維持在原本的紅色2秒，然後開始播放動畫從綠色變藍色，動畫播放完畢後回到紅色

接下來我們加上animation-fill-mode的參數forwards

我們來看看結果會是這樣

它會先維持在原本的紅色2秒，然後開始播放動畫從綠色變藍色，但是動畫播放完後不會回到紅色，會停在動畫結束的藍色

再來把animation-fill-mode的參數換成backwards

看一下會有什麼不一樣呢

它一開始就會從動畫開始的綠色位置等待延遲的2s後變成藍色，動畫結束後就會回到初始的紅色

最後是將animation-fill-mode的參數換成both

結果就會是下面這樣

一樣直接從動畫開始的綠色等待延遲2s，動畫開始播放變成藍色，結束後就停在動畫的結束效果，不會回到初始設定的紅色

接下來我們來看一下animation-play-state效果是怎樣呢

我們先設置一個藍色的圓球，然後設定它的動畫效果2s並且無線播放，然後動畫內容設定讓他變形從0度到360度。

我們設定了transform-origin: 200px他就會在右方的200px為基準點，所以效果看起來就會是在那邊繞圈圈呢

因為程式碼中我們加上了hover時會讓他的animation-play-state變成 paused，就讓我們看一下效果會是如何呢

它就會在我們碰到它的時候暫停了呢～

創意

製作動畫需要的3個重要屬性都學會了，就能運用各位的創意來做出很棒的動畫了呢。
如果已經會javascript了就可以搭配不同的事件觸發及判斷式來製作很炫的動畫了！！！